<template>
  <div class="w-full h-full flex">

    <div class="w-1/2 h-full rounded-xl bg-white mr-2.5 p-3">
      <distributed-allocation-list/>
    </div>
    <div class="w-1/2 h-full p-3 rounded-xl border-slate-200 bg-white">
      <div class="flex items-center mb-2">
        <div class="flex items-center bg-blue-50/60 rounded-lg py-0.5 px-2">
          <i class="iconfont icon-cangkukucun text-blue-500 text-base"/>
          <span class="title font-semibold text-blue-600 ml-1.5">分步式调入</span>
        </div>
        <div class="flex-1 h-[1px] bg-gradient-to-r from-blue-200 via-blue-100/50 to-transparent ml-3"></div>
      </div>
      <div class="w-full flex items-center" style="height: 88%">
      <div class="w-full rounded-xl" style="height: 303px;background-color: #f7f8fd;border: 1px solid #f3f4f8">
        <v-chart ref="currentRef"/>
      </div>
      </div>
    </div>

  </div>

</template>
<script setup>
import distributedAllocationList from './distributedAllocationList.vue'
import { onMounted, ref } from 'vue'
import { getReceiptInstockData } from '@/api/warehouseEntryApi'


const currentRef = ref()
const renderOption = (option) => {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(0,0,0,0.05)'
        }
      },
      backgroundColor: 'rgba(255,255,255,0.9)',
      borderColor: '#e6e8ed',
      textStyle: {
        color: '#333'
      },
      padding: [8, 12]
    },
    grid: {
      left: '3%',
      right: '4%',
      top: '8%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#e6e8ed'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#e6e8ed'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#666',
        fontSize: 12
      }
    },
    yAxis: {
      type: 'category',
      data: chartNameList.value,
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#e6e8ed'
        }
      },
      axisLabel: {
        color: '#666',
        fontSize: 12,
        margin: 16
      }
    },
    series: [
      {
        name: '数量',
        type: 'bar',
        data: chartNumList.value,
        barWidth: '8px',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: '#2563EB'
            }, {
              offset: 1,
              color: '#38BDF8'
            }]
          },
          borderRadius: [0, 5, 5, 0]
        },
        emphasis: {
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [{
                offset: 0,
                color: '#38BDF8'
              }, {
                offset: 1,
                color: '#2563EB'
              }]
            }
          }
        }
      }
    ]
  }
}
const chartNameList = ref([])
const chartNumList = ref([])
const getNumObj = async () => {
  try {
    const { data } = await getReceiptInstockData()
    chartNameList.value =  data.materialCodeQtyStepDtos.map(item => item.materialCode)
    chartNumList.value =  data.materialCodeQtyStepDtos.map(item => item.qty)
  } catch (e) {
    console.log(e)
  }

}


onMounted(async () => {
  await getNumObj()
  currentRef.value.setOption(renderOption())
})
</script>


<style scoped lang="scss">

</style>
